<template>
	<div class="app">

		<div class="product-details">
			<h2 class="h2">商品名称：{{ goodsDetail.name }}</h2>
			<div class="image-wrapper">
				<img :src="goodsDetail.imageUrl" alt="Product Image" />
			</div>
			<p class="price">兑换积分: {{ goodsDetail.skus[0].point}}</p>
			<p class="description">库存：{{ goodsDetail.skus[0].inventory}}</p>
			<p class="description">销量：{{ goodsDetail.skus[0].sales}}</p>
			<p class="description">商品类型：{{ goodsDetail.type}}</p>
			<p class="description">上架时间：{{ goodsDetail.createTime}}</p>
			<button class="exchange-btn" @click="showExchangeDialog(goodsDetail)">立即兑换</button>
		</div>

		<!-- 兑换弹窗 -->
		<div class="dialog" v-show="isShowExchangeDialog">
			<div class="dialog-mask"></div>
			<div class="dialog-content">
				<h3 class="dialog-title">确认兑换？</h3>
				<div class="exchange-info">
					<div class="exchange-item">
						<span class="exchange-item-title">商品名称：</span>
						<span class="exchange-item-value">{{ exchangeProduct.name }}</span>
					</div>
					<div class="exchange-item">
						<span class="exchange-item-title">兑换积分：</span>
						<!-- <span class="exchange-item-value">{{ exchangeProduct.point }} / {{ exchangeProduct.inventory }}</span> -->
						<span class="exchange-item-value">{{ goodsDetail.skus[0].point}}</span>
					</div>
				</div>
				<div class="dialog-btns">
					<button class="cancel-btn" @click="closeExchangeDialog">取消</button>
					<button class="confirm-btn" @click="confirmExchange(goodsDetail)">确认</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	//引入获取积分商品接口--端午礼盒
		import {
			goodsGetlh
		} from '../../api/index.js'
		//引入获取积分商品接口--端午香囊
		import {
			goodsGetxn
		} from '../../api/index.js'
		//引入获取积分商品接口--巧克力蛋糕
		import {
			goodsGetdg
		} from '../../api/index.js'
		//引入获取积分商品接口--黄酒
		import {
			goodsGethj
		} from '../../api/index.js'
		//引入获取积分商品接口--龙舟模型
		import {
			goodsGetmx
		} from '../../api/index.js'
		//引入获取积分商品接口--粽子
		import {
			goodsGetzz
		} from '../../api/index.js'
		//引入获取积分商品接口--端午礼盒
			import {
				goodGet
			} from '../../api/index.js'
	//引入下单接口
	import {
		submit
	} from '../../api/index.js'

	export default {
		data() {
			return {
				isShowExchangeDialog: false,
				exchangeProduct: {},
				goodsDetail: []
			};
		},
		methods: {
			getGoodDetail() {
				// 从缓存中获取 productId
				const productid = uni.getStorageSync('productId');
				
				goodGet(productid)
					.then(response => {
						this.goodsDetail = response.data.data
					})
					.catch(error => {
						console.log(error)
					})
					/*
					if (productid == '2306232mS7RgeFve') { // 端午礼盒
										goodsGetlh()
											.then(response => {
												this.goodsDetail = response.data.data
											})
											.catch(error => {
												console.log(error)
											})
									} else if (productid == '230623j9s4qVAAJY') { // 端午香囊
										goodsGetxn()
											.then(response => {
												this.goodsDetail = response.data.data
											})
											.catch(error => {
												console.log(error)
											})
									} else if (productid == '230623zgew9ucuk3') { // 巧克力蛋糕
										goodsGetdg()
											.then(response => {
												this.goodsDetail = response.data.data
											})
											.catch(error => {
												console.log(error)
											})
									} else if (productid == '230623h5r3qFceKS') { // 黄酒
										goodsGethj()
											.then(response => {
												this.goodsDetail = response.data.data
											})
											.catch(error => {
												console.log(error)
											})
									} else if (productid == '230623HPEny5d7zs') { // 龙舟模型
										goodsGetmx()
											.then(response => {
												this.goodsDetail = response.data.data
											})
											.catch(error => {
												console.log(error)
											})
									} else if (productid == '230623q3CXDM8Qdf') { // 粽子
										goodsGetzz()
											.then(response => {
												this.goodsDetail = response.data.data
												console.log(response.data.data);
											})
											.catch(error => {
												console.log(error)
											})
									}
									*/
			},

			showExchangeDialog(goodsDetail) {
				this.exchangeProduct = goodsDetail;
				this.isShowExchangeDialog = true;
				//isShowExchangeDialog：数据属性，被用于控制是否显示兑换对话框。当该属性的值为 true 时，兑换对话框会显示出来；当该属性的值为 false 时，兑换对话框会隐藏起来。
			},
			closeExchangeDialog() {
				this.isShowExchangeDialog = false;
			},
			// 兑换
			confirmExchange(goodsDetail) {
				// 从缓存中获取会员积分point
				const point = uni.getStorageSync("point")
				// 判断会员积分是否充足
				if (goodsDetail.skus[0].point < point) {
					// 把 skuId、spuId、point 放入缓存
					this.skuId = goodsDetail.skus[0].skuId;
					this.spuId = goodsDetail.skus[0].spuId;
					this.point = goodsDetail.skus[0].point;
					uni.setStorageSync('skuId', this.skuId);
					uni.setStorageSync('spuId', this.spuId);
					uni.setStorageSync('point', this.point);
					// 跳转到下单页面
					uni.navigateTo({
						url: '/pages/pointsMall/orderSubmit'
					})
					this.isShowExchangeDialog = false;
				} else {
					wx.showToast({
						title: '积分不足！',
						icon: 'error'
					})
				}

			}
		},
		// 微信小程序专属生命周期函数：页面加载时触发
		onLoad() {
			wx.setNavigationBarTitle({
				title: '商品详情'
			});
			// 查询积分商品列表
			this.getGoodDetail(); // 注意要加上 "this." 来引用对象内的方法
		}
	};
</script>

<style scoped>
	.app {
		/* 设置背景 */
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648f02af5a7e3f031019afbe/648f0d26726ab50011f2463c/16875929724655733013.png');
		background-repeat: no-repeat;
		/* background-repeat:用于控制背景图片是否重复平铺。no-repeat表示不重复平铺，即只显示一张图片。 */
		background-position: center;
		/* background-position:用于调整背景图片的位置。center表示将图片居中显示在背景区域。 */
		height: 500px;
		background-size: 100% auto;
		/* 为了确保背景图片的宽高比例不变，background-size属性的高度值设置为auto */
	}

	.product-details {
		text-align: center;
		/* margin-top: 20px;		 */
	}

	.h2 {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
		padding-top: 10px;
	}

	.image-wrapper {
		width: 200px;
		height: 200px;
		margin: 0 auto;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.image-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.description {
		font-size: 16px;
		line-height: 1.5;
		margin-top: 10px;
	}

	.price {
		font-size: 16px;
		font-weight: bold;
		margin-top: 20px;
	}

	.add-to-cart-button {
		background-color: #007bff;
		color: #fff;
		border: none;
		padding: 10px 20px;
		font-size: 16px;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.add-to-cart-button:hover {
		background-color: #0056b3;
	}

	/* 弹窗样式 */
	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}

	.dialog-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.dialog-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 500rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		text-align: center;
	}

	.dialog-title {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.exchange-info {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: left;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.exchange-item {
		margin-bottom: 10rpx;
	}

	.exchange-item-title {
		display: inline-block;
		width: 150rpx;
		font-size: 26rpx;
		color: #888;
	}

	.exchange-item-value {
		display: inline-block;
		font-size: 30rpx;
		color: #4CAF50;
	}

	.exchange-btn {
		background-color: rgba(255, 255, 255, 0.5);
		width: 700rpx;
		border: groove;
		border-width: medium;
		border-color: #55aa7f;
		margin-top: 20px;
	}

	.dialog-btns {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.cancel-btn {
		margin-right: 10rpx;
		display: inline-block;
		font-size: 20rpx;
		color: #000000;
		border: none;
		border-radius: 5rpx;
		padding: 8rpx 12rpx;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
		background-color: #ccc;
	}

	.confirm-btn {
		display: inline-block;
		font-size: 20rpx;
		color: #000000;
		border: none;
		border-radius: 5rpx;
		padding: 8rpx 12rpx;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
		background-color: #4CAF50;
	}

	.cancel-btn:hover {
		color: #fff;
		/* 设置鼠标悬停时颜色 */
	}

	.confirm-btn:hover {
		color: #fff;
		/* 设置鼠标悬停时颜色 */
	}
</style>
